<template>
  <view class="page">
    <view class="tab">
      <view style="display: flex">
        <view
          @click="changeTab(index)"
          :class="['tabItem', active === index ? 'active' : '']"
          v-for="(item, index) in tabList"
          :key="index"
        >
          {{ item }}
        </view></view
      >
      <view class="user_box">
        <img
          @click="openModal"
          class="user_icon"
          src="@/static/images/calendar/icon-user.png"
          alt=""
        />
      </view>
    </view>
    <view style="margin-top: 90rpx">
      <everyday
        @changeTab="changeTab"
        @openModal="openModal"
        :exclusiveList="exclusiveList"
        v-if="active === 0"
      ></everyday>
      <exclusive v-if="active === 1"></exclusive>
      <set-holiday v-if="active === 2"></set-holiday>
    </view>
    <login ref="login" @closeModal="changeModal" :loginModal="loginModal"></login>
    <modal
      @closeModal="closeAdd"
      :visible="addModal"
      v-if="modalAddList.length && addModal"
    >
      <img class="add_img" :src="modalAddList[0].adPicture" alt="" />
    </modal>
  </view>
</template>

<script>
import everyday from "./components/everyday/everyday.vue";
import exclusive from "./components/exclusive/exclusive.vue";
import setHoliday from "./components/setHoliday/setHoliday.vue";
import login from "./components/login/login.vue";
import { getAdListApi, getChannelAdTypeApi } from "@/http/api.js";
import modal from "@/components/modal/modal.vue";
export default {
  components: { everyday, exclusive, setHoliday, login, modal },

  data() {
    return {
      addModal: false,
      tabList: ["每日", "个人专属", "节日"],
      active: 0,
      loginModal: false,
      exclusiveList: [],
      modalAddList: [],
    };
  },
  onLoad(param) {},
  methods: {
    closeAdd() {
      //关闭广告弹窗

      this.addModal = !this.addModal;
    },

    getAddList() {
      getAdListApi().then((res) => {
        const { rows, code } = res;
        if (code === 200) {
          // adSpace 0每日运势广告 1 专属广告1 2 专属广告2
          //status ===2 生效
          this.exclusiveList = rows.filter(
            (item) => item.adSpace !== "0" && item.status == "2"
          );
          this.modalAddList = rows.filter(
            (item) => item.adSpace == "0" && item.status == "2"
          );
          //判断是否显示过广告，已显示本地存储，未显示显示弹窗
          const isShow = uni.getStorageSync("isShow") || "" === "1";
          console.log(this.modalAddList.length);
          if (!isShow && this.modalAddList.length) {
            this.addModal = true;

            uni.setStorageSync("isShow", "1");
          }
        }
      });
    },

    changeTab(index) {
      console.log(index, "index");
      this.active = index;
    },

    openModal() {
      if (this.$store.state.user.hasLogin) {
        this.$refs.login.closeModal();
      } else {
        // this.$refs.exclusive.showMask = false;
        this.changeModal();
      }
    },
    changeModal() {
      this.loginModal = !this.loginModal;
    },
  },
  created() {
    this.getAddList();
  },
};
</script>

<style lang="scss" scoped>
.page {
  background: #f9f9f9;
  height: 100%;
  overflow-x: hidden;
}
.tab {
  padding: 20rpx;
  display: flex;
  justify-content: space-between;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 88;
  background: #f6f6f6;
  width: calc(100% - 40rpx);
  .tabItem {
    margin-left: 24rpx;
    font-size: 24rpx;
    color: #262626;
  }
}
.active {
  color: #ca4336 !important;
  font-size: 36rpx !important;
  font-weight: bold !important;
  position: relative;
}
.active:after {
  content: "";
  display: block;
  width: 100%;
  height: 4rpx;
  background: #ca4336;
  position: absolute;
  bottom: -12rpx;
  left: 0;
  border-radius: 4rpx;
}
.user_icon {
  width: 44rpx;
  height: 44rpx;
}
.add_img {
  width: 600rpx;
  height: 600rpx;
  margin-top: 20rpx;
}
</style>
